<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.2/marked.min.js"></script>
    <title>GPT风格问答界面</title>
    <style>
        :root {
            --primary-color: #4a90e2;
            --secondary-color: #f0f0f0;
            --text-color: #333;
            --ai-message-bg: #e6f2ff;
            --user-message-bg: #f0f7ff;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
        }

        .chat-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 80vh;
        }

        .chat-header {
            background-color: var(--primary-color);
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 1.2em;
        }

        .chat-messages {
            flex-grow: 1;
            overflow-y: auto;
            padding: 20px;
        }

        .message {
            max-width: 80%;
            margin-bottom: 15px;
            padding: 10px 15px;
            border-radius: 20px;
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-message {
            background-color: var(--user-message-bg);
            align-self: flex-end;
            margin-left: auto;
        }

        .ai-message {
            background-color: var(--ai-message-bg);
            align-self: flex-start;
        }

        .chat-input {
            display: flex;
            padding: 15px;
            background-color: white;
            border-top: 1px solid var(--secondary-color);
        }

        #user-input {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid var(--secondary-color);
            border-radius: 20px;
            font-size: 1em;
        }

        #send-button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            margin-left: 10px;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #send-button:hover {
            background-color: #3a7bc8;
        }

        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            .message {
                max-width: 90%;
            }
        }


<!--        // 新增联想问题的样式-->
<!--        .suggestions {-->
<!--        margin-top: 5px;-->
<!--        padding: 5px;-->
<!--        border-radius: 5px;-->
<!--        text-align:left;-->
<!--        }-->

<!--        .suggestion-button {-->
<!--           background-color: #f0f0f0; /* Light gray */-->
<!--            border: 1px solid #ccc;-->
<!--            border-radius: 3px;-->
<!--            padding: 5px 10px;-->
<!--            margin-right: 5px;-->
<!--            margin-bottom: 5px;-->
<!--            cursor: pointer;-->
<!--            display: inline-block;-->
<!--            font-size: 14px;-->
<!--        }-->

<!--        .suggestion-button:hover {-->
<!--            background-color: #e0e0e0; /* Darker gray on hover */-->
<!--        }-->
        .suggestions {
            margin-top: 5px;
            padding: 5px;
            border-radius: 8px;
            text-align: left;
        }

        .suggestion-button {
            background-color: #f8f9fa; /* 提供轻微的视觉层次 */
            border: 1px solid #d6d8db; /* 柔和的灰色边框 */
            border-radius: 6px;
            padding: 8px 15px;
            margin: 5px;
            cursor: pointer;
            display: inline-block;
            font-size: 15px;
            color: #495057; /* 深色字体 */
            transition: background-color 0.3s ease, color 0.3s ease; /* 增加平滑过渡 */
        }

        .suggestion-button:hover {
            background-color: #e9ecef; /* 鼠标悬停时的背景变化 */
            color: #343a40; /* 鼠标悬停时字体加深 */
        }



    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">问答助手</div>
        <div id="chat-messages" class="chat-messages"></div>
        <div class="chat-input">
            <input type="text" id="user-input" placeholder="输入您的问题..." aria-label="输入您的问题">
            <button id="send-button">发送</button>
        </div>
    </div>


    <script>
        const chatMessages = document.getElementById('chat-messages');
        const userInput = document.getElementById('user-input');
        const sendButton = document.getElementById('send-button');

        function addMessage(content, isUser, suggestions) {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message');
            messageDiv.classList.add(isUser ? 'user-message' : 'ai-message');

            // 设置 messageDiv 的 HTML 内容
            messageDiv.innerHTML = marked.parse(content);

            // {#messageDiv.textContent = content;#}
            chatMessages.appendChild(messageDiv);

            // 将联想的问题放在回答后
            if (suggestions && suggestions.length > 0) {
                const suggestionsDiv = document.createElement('div');
                suggestionsDiv.classList.add('suggestions');

                suggestions.forEach(suggestion => {
                    const suggestionButton = document.createElement('button');
                    suggestionButton.classList.add('suggestion-button')
                    suggestionButton.style.width = 'auto'; // 设置按钮宽度自动，根据内容调整
                    suggestionButton.textContent = suggestion;
                    suggestionButton.addEventListener('click', () => {  //点击的时候会放到用户输入框；
                         userInput.value = suggestion;
                     });
                    suggestionsDiv.appendChild(suggestionButton);
                    suggestionsDiv.style.display = 'flex';
                    suggestionsDiv.style.flexDirection = 'column';
                    suggestionsDiv.style.alignItems = 'flex-start';
                });
                chatMessages.appendChild(suggestionsDiv);
            }

            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        async function sendMessage() {
            const message = userInput.value.trim();
            if (message) {
                addMessage(message, true);
                userInput.value = '';

                try {
                    const response = await fetch('/api/chat', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ message: message }),
                    });

                    if (response.ok) {
                        const data = await response.json();
<!--                        addMessage(data.response, false);-->
                        addMessage(data.response, false, data.suggestions); // 新增联想问题 suggestions
                    } else {
                        addMessage('抱歉，发生了错误。', false);
                    }
                } catch (error) {
                    console.error('Error:', error);
                    addMessage('抱歉，发生了错误。', false);
                }
            }
        }

        sendButton.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 添加焦点管理以提高可访问性
        userInput.addEventListener('keydown', function(e) {
            if (e.key === 'Tab' && !e.shiftKey) {
                e.preventDefault();
                sendButton.focus();
            }
        });

        sendButton.addEventListener('keydown', function(e) {
            if (e.key === 'Tab' && !e.shiftKey) {
                e.preventDefault();
                userInput.focus();
            }
        });
    </script>
</body>
</html>